Responsive layout system and server

ABSTRACT

The disclosure is directed to a novel responsive layout that allows the user to build one layout that can fit on all or virtually all device form factors according to some embodiments. In some embodiments, the responsive layout is configured to allow users to arrange their content based on the size and shape of a display. In some embodiments, the system is configured to receive a request to access content through a computer and in response to the request, automatically generate a responsive layout based on a display size and a content of the request. In some embodiments, the responsive layout includes a responsive layout editor pane configured to allow the user to customize the responsive layout as desired.

CROSS-REFERENCE RELATED APPLICATIONS

This application claims the benefit of and priority to U.S. ProvisionalApplication No. 62/890,011, filed Aug. 21, 2019, entitled “ResponsiveLayout System and Server”, the entire contents of which are incorporatedherein by reference.

BACKGROUND

The current layout system requires users to create and maintaindifferent layouts on each device. While fixed layouts may workreasonably well when the display size is known, responsive layouts canwork well on a much wider spectrum of layout sizes, as they allowcontent to be displayed and viewed on many different devices.

Accordingly, there is a need to provide a seamless in-the-fieldresponsive layout which allows the user to build one layout that can fiton all or virtually all device form factors.

SUMMARY

Some embodiments of present disclosure provide various exemplarytechnically improved computer-implemented platforms, systems andmethods, including methods for providing a seamless in-the-fieldresponsive layout which allow the user to build one layout that can fiton all or virtually all device form factors (i.e., the size, shape,and/or physical arrangement of a computer and/or display). In someembodiments, the system is configured to receive a request to accesscontent through a computer. In response to receiving the request, insome embodiments, the system is configured to generate a responsivelayout based on the size of a display coupled to the computer. In someembodiments, the responsive layout includes a responsive layout editorpane. In some embodiments, the responsive layout editor pane isconfigured to enable a user to create a custom responsive layout. Insome embodiments, the custom responsive layout enables the use to modifythe location, size, orientation and/or content of one or more panes.

In some embodiments, the system is configured to display the contentbased on the responsive layout through on the display. In someembodiments, the system includes a graphical user interface (GUI). Insome embodiments, the GUI is configured to receive one or more inputs toselect a modified responsive layout through the responsive layout editorpane. In some embodiments, the system is configured to replace theresponsive layout by the selected modified responsive layout based onthe one or more inputs. In some embodiments, the system is configured todisplay the content based on the selected modified responsive layout. Insome embodiments, the responsive layout editor pane includes one or moresections, the one or more sections including one or more of a responsivegrid section, a resolution section, a device breakpoints section, arotating section, a show-hidden panes section, a property grid section,an adding pane section, and a combination thereof. In some embodiments,the responsive grid section includes one or more panes in the responsivelayout. In some embodiments, the layout is configured to be divided intoa number of columns based on the one or more inputs. In someembodiments, the device breakpoints section includes one or morebreakpoints for the responsive layout. As used herein, “breakpoints”refer to the boundaries for each pane. In some embodiments, the rotationsection includes a landscape mode and a portrait mode.

In some embodiments, the system includes a responsive layout systemconfigured to be in electronic communication with a plurality of users,the responsive layout system comprising one or more computers comprisingone or more non-transitory computer-readable media storing processorexecutable instructions, and one or more processors configured toexecute the instructions. In some embodiments, the system is configuredto receive a request to access content. In some embodiments, in responseto the request, the system is configured to generate a responsive layoutbased on the size of a display.

In some embodiments, the system is configured to fill the availabledisplay size with supplemental panes that include information other thanwhat was specified in the request. In some embodiments, the supplementalpanes (as well as all panes) comprise one or more of data, charts,graphs, animations, diagrams, maps, text, alerts, color coding, and orany other information retrieved from a database (e.g., a historiandatabase). For example, a request may be a user request for informationabout the amperage for a pump. In response, the system is configured toshow a pane with the requested information according to someembodiments. In some embodiments, the system is configured toautomatically display additional information about one or morepriorities in one or more supplemental panes. In some embodiments, thesystem is configured to determine what is a priority. In someembodiments, the system includes artificial intelligence and/or machinelearning (collectively referred to as AI) to identify priorities todisplay in the supplemental panes. In some embodiments, the prioritiesinclude: alerts, expected component lifetime, production and/or businesstrends, predictions, throughput, and/or any information the system hasidentified as needing corrective action and/or attention. However, insome embodiments, the system is configured to automatically displayadditional information about items related to request (i.e., the pump)in one or more supplemental panes. In some embodiments, the system isconfigured to automatically display additional information about itemsnot related to request (e.g., drum rotation speed, statistical analysisfor throughput, process flow overview, etc.)

In some embodiments, the responsive layout includes a responsive layouteditor pane. In some embodiments, the system is configured to displaythe content and/or arrange panes based on the responsive layout. In someembodiments, the system is configured to receive an input to modify theresponsive layout into a custom layout (i.e., modified responsivelayout) through the responsive layout editor pane. In some embodiments,the system is configured to replace the responsive layout by theselected modified responsive layout based on the input. In someembodiments, the system is configured to display the content based onthe selected modified responsive layout on the display.

In some embodiments, the responsive layout editor pane includes one ormore pane sections, the one or more pane sections including one or moreof a responsive grid section, a resolution section, a device breakpointssection, a rotating section, a show-hidden panes section, a propertygrid section, an adding pane section, and/or a combination thereof. Insome embodiments, one or more pane sections are configured to allow auser to customize the attributes of one or more panes. In someembodiments, the responsive grid section includes one or more panes inthe responsive layout, where the system is configured to allow a user tomodify the attributes of one or more panes in the responsive layout. Insome embodiments, the responsive layout is configured to enable a userto organize the panes into a desired number of columns and/or rows basedon the input. In some embodiments, the device breakpoints sectionincludes one or more breakpoints for the responsive layout. In someembodiments, the device breakpoints section includes one or morecommands that allows users to customize one or more breakpointattributes. In some embodiments, one or more breakpoint attributesinclude: the size of the pane, the size of one or more items in thepane, an overflow behavior, and/or any other feature that defines a sizeof the pane's content and/or the dimensions of the panes. In someembodiments, overflow behavior includes what information is removed fromthe pane when a user zooms in on a portion of the pane or selects aportion of the pane. For example, a user may zoom in on a graph and thepane may show all items in the pane getting larger until they disappearoutside the boundaries of the pane (i.e., similar to a conventional zoominto an area of a static picture). In some embodiments, the rotationsection includes a landscape mode and/or a portrait mode and isconfigured to rotate one or more panes and/or the entire responsivelayout based on the rotation section selected mode.

DESCRIPTION OF THE DRAWINGS

FIG. 1 illustrates a user's display according to some embodiments.

FIG. 2 illustrates a high-level architecture diagram according to someembodiments.

FIG. 3 illustrates a responsive layout editor according to someembodiments.

FIG. 4 illustrates a responsive layout pane design time according tosome embodiments.

FIG. 5 illustrates a responsive layout editor according to someembodiments.

FIG. 6 is a zoomed in perspective of features of the responsive layouteditor of FIG. 5 according to some embodiments.

FIG. 7 is a zoomed in perspective of features of the responsive layouteditor of FIG. 5 according to some embodiments.

FIG. 8 illustrates the Add Pane of FIG. 5 populated with charts from theToolbox of FIG. 5 according to some embodiments.

FIG. 9 depicts the Add Pane of FIG. 5 changed for display on a screenwith a different resolution according to some embodiments.

FIG. 10 shows changing the layout of the Add Pane to conform to a screenresolution according to some embodiments.

FIG. 11 shows hiding panes according to some embodiments.

FIG. 12 illustrates an exemplary computer system enabling or aspects ofthe system described herein.

DETAILED DESCRIPTION

Before any embodiments of the invention are explained in detail, it isto be understood that the invention is not limited in its application tothe details of construction and the arrangement of components set forthin the following description or illustrated in the following drawings.Some embodiments of the system are configured to be combined with someother embodiments and all embodiments are capable of being practiced orof being carried out in various ways. Also, it is to be understood thatthe phraseology and terminology used herein is for the purpose ofdescription and should not be regarded as limiting. The use of“including,” “comprising,” or “having” and variations thereof herein ismeant to encompass the items listed thereafter and equivalents thereofas well as additional items. Unless specified or limited otherwise, theterms “mounted,” “connected,” “supported,” and “coupled” and variationsthereof are used broadly and encompass both direct and indirectmountings, connections, supports, and couplings. Further, “connected”and “coupled” are not restricted to physical or mechanical connectionsor couplings.

The following discussion is presented to enable a person skilled in theart to make and use the system. Various modifications to the illustratedembodiments will be readily apparent to those skilled in the art, andthe generic principles recited according to some illustrated embodimentsare configured to be applied to and/or combined with some otherillustrated embodiments and applications without departing fromembodiments of the invention. Thus, embodiments of the invention are notintended to be limited to embodiments shown, but are to be accorded thewidest scope consistent with the principles and features disclosedherein. The following detailed description is to be read with referenceto the figures, in which like elements in different figures have likereference numerals. The figures, which are not necessarily to scale,depict selected embodiments and are not intended to limit the scope ofembodiments of the invention. Skilled artisans will recognize theexamples provided herein have many useful alternatives and fall withinthe scope of embodiments of the invention.

Some embodiments include a 3-dimensional (3D) model, equipment dataspecifications, maintenance records, related events, drawings and pipingand instrumentation diagrams (P&IDs) integrated into a supervisorycontrol and data acquisition (hereinafter “SCADA”) operator interface(i.e., a human machine interface (HMI) that presents information to anoperator or user about the state of a process, and enables theoperator's control instructions).

Some embodiments include an engineering information management system(Application NET) that is configured to be integrated into an operatorinterface such as InTouch operations management interface (OMI) thatautomatically presents content-based asset information to operators(also known as users), including a presentation of a 3D representationof where assets/equipment exists in context to other equipment, specificdata specifications of the equipment, and/or the traditional SCADAreal-time visualizations of operational data. In some embodiments, asthe user/operator navigates either the operational model (within theSCADA system) or the engineering model (within Application NET), thedisplay is configured to adjust automatically to the changing context toshow the user appropriate contextual information. In some embodiments,the navigation includes zooming in to make the contents of one or moreor more panes larger. In some embodiments, the system is configured tozoom in and/or out on a particular pane while other panes are expandedin and/or out of the display while maintaining the same layout.

In some embodiments, responsive layouts are configured to allow the userto build one layout that can fit on all device form factors. In someembodiments, the responsive layout is supported in both desktop and webproduct offerings. In some embodiments, responsive layouts areconfigured to be built with a responsive layout editor. In someembodiments, responsive layouts are configured to be used in differentproduct offerings. In some embodiments, current responsive layouts areconfigured to be supported in InTouch OMI and InTouch Web Client. Insome embodiments, the system is configured to use a grid system thatincludes a series of rows and columns of panes to achieve the responsivelayout. In some embodiments, the system is configured to be used inconjunction with a conventional grid system (e.g., Windows PresentationFoundation (WPF) grid system).

In some embodiments, responsive layout panes are configured to supportone or more of the following properties: Column Span, Push, Pull,Offset, and/or IsVisible. In some embodiments, the properties areconfigured to determine how the content will be shown at runtime.

In some embodiments, the single layout is configured to run both in theon-premises Windows-based product and on the web. Some embodimentsinclude, single editor for all device form factors, same editor foron-premises, and the web. In some embodiments, content in responsivelayout is configured to be resized, moved, or hidden based on deviceform factors or other desired properties.

In some embodiments, the responsive layout including the editor andruntimes is configured to be based on or offer similar functionality tothe Bootstrap grid system. Some embodiments are configured to use aseries of containers, rows, and columns to layout and align content.

In some embodiments, the responsive layout editor is configured to allowa user to create a layout which is configured to respond and changebased on the device on which the user is viewing the layout. In someembodiments, the system is configured to enable users to place contenton these layouts. In some embodiments, responsive layouts are configuredto be used with OMI View Applications.

In some embodiments, responsive layouts are configured to allow users toarrange their content based on the device a user is viewing the layoutfrom. In some embodiments, this includes resizing, moving, and hidingcontent in the responsive layout. In some embodiments, each responsivelayout is configured to have panes and each pane is configured to havecontent associated with it. In some embodiments, a user can configurehow much of the available display an individual pane can occupy ondifferent device form factors. In some embodiments, responsive layoutsare configured to provide the same or similar functionality as aconventional Bootstrap Grid System. In some embodiments, the responsivelayout is configured to be built using the responsive layout editor.

In some embodiments, the system includes an editor (e.g., a responsivelayout editor) is configured to have a selector located on the display(e.g., at the top). In some embodiments, the selector is configured toallow the user to switch between different pre-defined standard deviceform factors. In some embodiments, this shows the user, in real-time,what a preview of their content will be arranged like on that device. Insome embodiments, the selector is configured to change the display viewto a different pre-defined standard device form factor.

In some embodiments, the system is configured to display content ondifferent devices such as phones, tablets and laptops. In someembodiments, each of these devices have a different display size whichrequires a custom layout to be created and maintained. In someembodiments, responsive layouts are configured to automatically arrangeand size panes to fit all device displays. In some embodiments, thisreduces costs because a user can select a single layout that isautomatically adjusted based on the device the content is accessed from.In some embodiments, responsive layouts are configured to allow users tohave a single editing experience for how their content will be arrangedon all their devices. In some embodiments, the responsive layout editoris configured to allow a user to preview how their content will appearto a user on different device form factors. In some embodiment, thisfeature greatly improves user productivity.

FIG. 1 illustrates a user's display according to some embodiments. Insome embodiments, the grid system is configured to split a user'sdisplay into multiple columns across the page (e.g., 2 to 12). In someembodiments, the user groups the columns individually. In someembodiments, the user groups the columns together to create widercolumns.

In some embodiments, the grid's system is configured to be responsive.In some embodiments, the columns are configured to rearrange dependingon the screen size. In some embodiments, the columns are configured tobe on a big screen (e.g., >30″ screen). In some embodiments, the columnsare configured to look better with the content organized in threecolumns. In some embodiments, the columns are configured to be on asmall screen (e.g., <30″ screen). In some embodiments, the columns on asmall screen are configured to look better if the content items arestacked on top of each other.

In some embodiments, the grid system is configured to have breakpoints.In some embodiments, the grid system breakpoints consist one or more of:“XS” (extra-small; e.g., about <10% of screen area), “SM” (small; e.g.,between about 10.1% and 20% of screen area), “MD” (medium; e.g., e.g.,between about 20.1% and 30% of screen area), “LG” (large; e.g., betweenabout 30.1% and 50% of screen area), “XL” (extra-large; e.g., greaterthan about 50%). The term “about” as used in conjunction withbreakpoints is ±0.1%). In some embodiments, these breakpoints areconfigured to be based on a number of pixels in the display (e.g.,total, width, length, diameter and/or a combination thereof). Forexample: XS≤576px≤SM≤768 px≤MD≤992px≤LG≤1200px≤XL.

FIG. 2 illustrates a responsive layout editor overview according to someembodiments. In some embodiments, a responsive layout is configured tobe an option within the layout editor. In some embodiments, a user makesa layout responsive with options. In some embodiments, options includeone or more of 1) IsResponsive property in the Layout Properties; and 2)when set to true (checked), the responsive layout editor appears. Insome embodiments, the toolbar button (FIG. 2: 201) is configured to bein the layout editor. In some embodiments, the toolbar button isconfigured to be used to toggle between responsive and fixed layouts.

FIG. 3 illustrates a responsive layout editor according to someembodiments. In some embodiments, the responsive layout editor pane isconfigured to contain sections. In some embodiments, the sectionsinclude one or more of: Section 301: Responsive Grid, Section 302:Resolution, Section 303: Device Breakpoints, Section 304: Rotate,Section 305: Show Hidden Panes; Section 306: Property Grid, Section 307:Add Pane.

In some embodiments, section 301 is configured to contain panes (e.g.,Pane 1 (default) 350, Pane 2, Pane 3, etc.) that are in the responsivelayout. In some embodiments, numbers 1 through 12 is found along thetop. In some embodiments, the layout is configured to be divided into 1to 12 columns. In some embodiments, the responsive grid is resized byheight and width. In some embodiments, section 302 contains currentwidth and height of the responsive grid of section 1. In someembodiments, users enter values in the edit box and the responsive gridwill respond.

In some embodiment, section 303 contains buttons which representdifferent breakpoints (XS, SM, MD, LG, XL) available for the responsivegrid. In some embodiments, when a breakpoint is selected, the responsivegrid is configured to resize to match the size of the device. In someembodiments, section 304 contains a button that is configured to allow auser to rotate between the landscape mode and the portrait mode. In someembodiments, the width and height are reversed.

In some embodiments, section 305 contains a button that is configured toallow a user to hide or show any panes which have been made hiddenthrough the IsVisible property.

In some embodiments, section 306 contains all properties related toLayout, Panes, and Content. In some embodiments, section 307 contains abutton that is configured to be used to add a new pane to the layout. Insome embodiments, panes are configured to be added to the end of thelist of layouts.

FIG. 4 illustrates a responsive layout pane design time for Pane 1 350according to some embodiments. In some embodiments, the responsivelayout pane design time is configured to include sections. In someembodiments, the sections include one or more of: Section 401: PaneName, Section 402: Context Menu, Section 403: Column Span Controls,Section 404: Visibility, and/or Section 405: Delete Pane.

In some embodiments, section 401 is configured to show the pane name. Insome embodiments, if the pane is the default pane, then “(default)” isappended to the name when not in edit mode. In some embodiments, thetextbox is editable and is configured to allow a user to change panename.

In some embodiments, the context menu 402 is configured to have thefollowing items when no content is on the pane: “Rename Pane” which setsfocus to Section 401, and “Delete Pane” which deletes the selected pane.In some embodiments, when a pane has content, the following items areconfigured to be added: “Edit<Content Name>”, “Remove Content” and “PaneProperties/Content Properties”.

In some embodiments, section 403 contains controls to change the columnspan (ColSpan) of a selected pane. In some embodiments, a dropdown isconfigured to list the numbers 1 through 12. In some embodiments, a userselects the number. In some embodiments, the ColSpan property isconfigured to update for the selected pane for the breakpoint that theresponsive grid is currently in. In some embodiments, the + and −buttons are configured to increment and decrement the ColSpan propertyfor the selected pane at the current breakpoint of the responsive grid.

In some embodiments, section 404 contains a button that is configured tohide or show a selected pane at the current breakpoint of the responsivegrid. In some embodiments, the property which it is configured to bebound to is IsVisible. In some embodiments, section 405 contains abutton that is configured to delete a selected pane from the layout. Insome embodiments, if there is only one pane in the layout, it cannot bedeleted.

In some embodiments, sections 401, 402, 403, 404, and 405 arecollectively referred to as pane controls 410.

Some embodiments include responsive layout pane properties. In someembodiments, responsive layout pane properties are configured to includeone or more of: Column Span, Push, Pull, Offset, and/or IsVisible.

In some embodiments, the column span property is used to determine thenumber of columns that a pane is configured to occupy in the grid. Insome embodiments, the column span property propagates from XS to XL,unless the property is set for one of those breakpoints. For example: apane has the following column span property values: ColXS (ColumnXS)=12, ColSM=0, ColMD=6, ColLG=0, ColXL=3 (i.e., in this case ColSM isconfigured to be 12 as it gets its value from ColXS). In someembodiments, ColLG is configured to be 6 as it gets its value fromColMD. In some embodiments, the default value is configured to be 0,except for ColXS which is configured to be 12.

In some embodiments, the push property is configured to push panes tothe right by the number of columns that are set. In some embodiments,when panes are pushed into other panes, they are configured to be hiddenbehind the pane to their right. In some embodiments, panes areconfigured to be partially or fully hidden. In some embodiments, panesare configured to be pushed partially or completely off the display. Insome embodiments, the push property is configured to propagate the sameway that the Column span property does. In some embodiments, the defaultvalue is configured to be 0.

In some embodiments, the pull property is configured to pull panes tothe left by the number of columns that is set. In some embodiments, whenpanes are pulled into other panes, they are configured to overlap thepane to their left. In some embodiments, panes are configured topartially or fully overlap panes next to them. In some embodiments,panes are configured to be pushed partially or completely off thedisplay. In some embodiments, the pull property is configured topropagate the same way that the Column span property does. In someembodiments, the default value is configured to be 0.

In some embodiments, the offset property is configured to push the paneto the right. In some embodiments, the offset property is configured topush the selected pane and all panes after it to the right by that manycolumns. In some embodiments, the offset property is not configured tocause panes to overlap by itself. In some embodiments, the offsetproperty is configured to propagate the same way that the Column spanproperty does. In some embodiments, the default value is configured tobe 0.

In some embodiments, the IsVisible property is configured to determinewhether a pane is shown or hidden at a certain breakpoint. In someembodiments, when the value of the IsVisible property is true, the paneis configured to be shown. In some embodiments, when the value of theIsVisible property is false, the pane is configured to be hidden. Insome embodiments, the IsVisible property does not propagate. In someembodiments, when the IsVisible property does not propagate, the defaultvalue is configured to be true.

Some embodiments include web client runtime behaviors. Some embodimentsinclude Using Responsive Layout in Web Client and Web Client Runtime. Insome embodiments, when using responsive layouts in the Web Client,current responsive layouts are configured to be used with OMI ViewApplications. In some embodiments, to see a responsive layout in the WebClient, a user must configure an OMI View Application with a responsivelayout. In some embodiments, a user experience for using a responsivelayout in an OMI View Application can be the same as using a fixedlayout.

Some embodiments include a web client runtime. In some embodiments, theInTouch Web Client runtime is configured to support responsive layouts.In some embodiment, the layouts it renders are configured to be HTMLbased and use libraries for their responsiveness. In some embodiments,as the browser is resized, the layout is configured to respond based onthe configuration.

Some embodiments include OMI runtime behaviors. In some embodiments, touse a responsive layout in the OMI runtime, the user selects the layoutin the View Application Editor. In some embodiments, OMI ViewApplications are configured to support both fixed and responsivelayouts.

Some embodiments include OMI view application runtime. In someembodiments, the OMI View Application runtime uses the Responsive GridWPF control to render the layout. In some embodiments, this is the samecontrol that is used at design time for the responsive layout editor. Insome embodiments, the behavior in runtime and design time are configuredto match exactly.

FIG. 5 illustrates a responsive layout editor according to someembodiments. In some embodiments, the responsive grid is set to aparticular resolution 502 (best shown in FIG. 6) and a particular paneconfiguration 501 as selected in the responsive breakpoint menu 503. Insome embodiments, pane configuration 501 is configured to be for a largemonitor, a smart TV, or the like. In some embodiments, paneconfiguration 501 is configured to be a view selected in a virtualenvironment, a smart phone, or any display device that supportsdisplaying images within the pane configuration 501. In someembodiments, responsive layout editor comprises a toolbox 504 and paneselection window 505 (best shown in FIG. 7)

FIG. 8 illustrates the pane configuration 501 of FIG. 5 populated withcharts from the pane selection window 505 according to some embodiments.According to some embodiments, pane configuration 501 is created bydragging panes from the pane selection window 505 into each pane.

FIG. 9 depicts the pane configuration 501 of FIG. 5 changed to bedisplayed on screens of different resolutions according to someembodiments. In some embodiments, the selection of screen resolution 911causes a responsive layout change to a new pane configuration 901. Insome embodiments, the selection of screen resolution 912 causes aresponsive layout change to a new pane configuration 902. In someembodiments, pane configuration 902 is configured to be for a largemonitor, a smart TV, a desktop monitor and/or the like. In someembodiments, pane configuration 501 is configured to be a view selectedin a virtual environment, a smart phone, or any display device thatsupports displaying images within the pane configurations 901, 902.

FIG. 10 shows changing the layout of the pane configuration 501 toconform to a screen resolution according to some embodiments. In someembodiments, the selection of screen resolution 1011 causes a responsivelayout change to a new 4 pane configuration 1001. In some embodiments,pane configuration 1002 shows that the number of visible panes isaltered by selecting the column span controls 1010. In some embodiments,the number of panes goes from a 4-pane configuration 1001 to a 12-paneconfiguration 1003. In some embodiments, the pane configuration ismodified to show any number of panes.

FIG. 11 shows hiding panes in a screen resolution according to someembodiments. In some embodiments, pane configuration 1101 is obtained byselecting screen resolution 1111. In some embodiments, paneconfiguration 1101 is configured to be for a large monitor, a smart TV,a desktop monitor and/or the like. In some embodiments, paneconfiguration 501 is configured to be a view selected in a virtualenvironment, a smart phone, or any display device that supportsdisplaying images within the pane configuration 1101. In someembodiments, hiding panes comprises moving a pane to within the view ofthe display device. In some embodiments, moving a pane comprisesscrolling the screen of the display device. In some embodiments,selecting the visibility button 1110 hides the pane as shown in step1102. In some embodiments, hiding a pane, such as pane 13, results inthe pane configuration 1103 where pane 13 is not shown.

FIG. 12 illustrates a computer system enabling or operating theresponsive layout system and server according to some embodiments. Insome embodiments, the responsive layout system and server are configuredto be operatively coupled to the computer system 210 shown in FIG. 2. Insome embodiments, the computer system 210 is configured to comprise theresponsive layout system and server. In some embodiments, the computersystem 210 is configured to include and/or operate and/or processcomputer-executable code of one or more of the above-mentioned programlogic, software modules, and/or systems. Further, in some embodiments,the computer system 210 is configured to operate and/or displayinformation within one or more graphical user interfaces coupled to theresponsive layout system and server. In some embodiments, the computersystem 210 comprises a cloud server and/or is configured to be coupledto one or more cloud-based server systems.

In some embodiments, the system 210 comprises at least one computerincluding at least one processor 232. In some embodiments, the at leastone processor 232 includes a processor residing in, or coupled to, oneor more server platforms. In some embodiments, the system 210 includes anetwork interface 235 a and an application interface 235 b coupled tothe least one processor 232 capable of processing at least one operatingsystem 234. Further, in some embodiments, the interfaces 235 a, 235 bcoupled to at least one processor 232 is configured to process one ormore of the software modules 238 (e.g., such as enterpriseapplications). In some embodiments, the software modules 238 includeserver-based software, and operate to host at least one user accountand/or at least one client account, and operate to transfer data betweenone or more of these accounts using the at least one processor 232.

With the above embodiments in mind, it should be understood that theinvention can employ various computer-implemented operations involvingdata stored in computer systems. Moreover, in some embodiments, theabove-described databases and models described throughout can storeanalytical models and other data on computer-readable storage mediawithin the system 210 and on computer-readable storage media coupled tothe system 210. In addition, in some embodiments, the above-describedapplications of the system are configured to be stored oncomputer-readable storage media within the system 210 and/or oncomputer-readable storage media coupled to the system 210. In someembodiment, these operations are those requiring physical manipulationof physical quantities. Usually, though not necessarily, in someembodiments, these quantities take the form of electrical,electromagnetic, or magnetic signals, optical or magneto-optical formcapable of being stored, transferred, combined, compared and otherwisemanipulated. In some embodiments, the system 210 comprises at least onecomputer readable medium 236 coupled to at least one data source 237 a,and/or at least one data storage device 237 b, and/or at least oneinput/output device 237 c.

In some embodiments, the invention is embodied as computer readable codeon a computer readable medium 236. In some embodiments, the computerreadable medium 236 is any data storage device that can store data,which can thereafter be read by a computer system (such as the system210). In some embodiments, the computer readable medium 236 is anyphysical or material medium that can be used to tangibly store thedesired information or data or instructions and which can be accessed bya computer or processor 232.

In some embodiments, the computer readable medium 236 includes harddrives, network attached storage (NAS), read-only memory, random-accessmemory, FLASH based memory, CD-ROMs, CD-Rs, CD-RWs, DVDs, magnetictapes, other optical and non-optical data storage devices. In someembodiments, various other forms of computer-readable media 236 transmitor carry instructions to a computer 240 and/or at least one user 231,including a router, private or public network, or other transmissiondevice or channel, both wired and wireless. In some embodiments, thesoftware modules 238 is configured to send and receive data from adatabase (e.g., from a computer readable medium 236 including datasources 237 a and data storage 237 b that comprises a database), anddata is received by the software modules 238 from at least one othersource. In some embodiments, at least one of the software modules 238 isconfigured within the system to output data to at least one user 231 viaat least one graphical user interface rendered on at least one digitaldisplay.

In some embodiments, the computer readable medium 236 is distributedover a conventional computer network via the network interface 235 awhere the system embodied by the computer readable code can be storedand executed in a distributed fashion. For example, in some embodiments,one or more components of the system 210 is configured to send and/orreceive data through a local area network (“LAN”) 239 a and/or aninternet coupled network 239 b (e.g., such as a wireless internet). Insome further embodiments, the networks 239 a, 239 b are configured toinclude wide area networks (“WAN”), direct connections (e.g., through auniversal serial bus port), and/or other forms of computer-readablemedia 236, and/or any combination thereof

In some embodiments, components of the networks 239 a, 239 b include anynumber of user devices such as personal computers including for exampledesktop computers, and/or laptop computers, and/or any fixed, generallynon-mobile internet appliances coupled through the LAN 239 a. Forexample, some embodiments include personal computers 240 a coupledthrough the LAN 239 a that can be configured for any type of userincluding an administrator. Some embodiments include personal computerscoupled through network 239 b. In some further embodiments, one or morecomponents of the system 210 are coupled to send or receive data throughan internet network (e.g., such as network 239 b).

For example, some embodiments include at least one user 231 coupledwirelessly and accessing one or more software modules of the systemincluding at least one enterprise application 238 via an input andoutput (“I/O”) device 237 c. In some other embodiments, the system 210can enable at least one user 231 to be coupled to access enterpriseapplications 238 via an I/O device 237 c through LAN 239 a. In someembodiments, the user 231 can comprise a user 231 a coupled to thesystem 210 using a desktop computer, laptop computers, and/or any fixed,generally non-mobile internet appliances coupled through the internet239 b. In some further embodiments, the user 231 comprises a mobile user231 b coupled to the system 210. In some embodiments, the user 231 b canuse any mobile computer 231 c to wireless coupled to the system 210,including, but not limited to, personal digital assistants, and/orcellular phones, mobile phones, or smart phones, and/or pagers, and/ordigital tablets, and/or fixed or mobile internet appliances.

Acting as Applicant's own lexicographer, Applicant defines the use ofand/or, in terms of “A and/or B,” to mean one option could be “A and B”and another option could be “A or B.” Such an interpretation isconsistent with the USPTO Patent Trial and Appeals Board ruling in exparte Gross, where the Board established that “and/or” means element Aalone, element B alone, or elements A and B together.

Some embodiments of the system are presented with specific values and/orsetpoints. These values and setpoints are not intended to be limiting,and are merely examples of a higher configuration versus a lowerconfiguration and are intended as an aid for those of ordinary skill tomake and use the system. In addition, “substantially” and“approximately” when used in conjunction with a value encompass adifference of 10% or less of the same unit and scale of that beingmeasured. In some embodiments, “substantially” and “approximately” aredefined as presented in the specification.

It is understood that the system is not limited in its application tothe details of construction and the arrangement of components set forthin the previous description or illustrated in the drawings. The systemand methods disclosed herein fall within the scope of numerousembodiments. The previous discussion is presented to enable a personskilled in the art to make and use embodiments of the system.Modifications to the illustrated embodiments and the generic principlesherein can be applied to all embodiments and applications withoutdeparting from embodiments of the system. Also, it is understood thatfeatures from some embodiments presented herein are combinable withother features according to some embodiments. Thus, some embodiments ofthe system are not intended to be limited to what is illustrated but areto be accorded the widest scope consistent with all principles andfeatures disclosed herein.

1. A system for displaying operational overview content comprising: ahistorian server comprising a historian database, and one or morecomputers comprising one or more processors and one or more computerreadable media, the one or more computer readable media comprisingprocessor executable instructions that when executed by the one or moreprocessors implement: a graphical user interface (GUI), and a responsivelayout; wherein the responsive layout is displayed on the graphical userinterface; wherein the responsive layout comprises content; wherein thecontent comprises content data stored in the historian database; whereinthe responsive layout is configured to detect one or more attributes ofa display; wherein the one or more attributes comprise one or more of awidth, length, diameter, pixel count, area, operating system,manufacturer, and additional applications being executed by the one ormore processors; and wherein the responsive layout is configured toautomatically arrange the content to fit the display based on the one ormore attributes.
 2. The system of claim 2, wherein the responsive layoutcomprises one or more panes; and wherein automatically arranging thecontent to fit the display comprises automatically determining a numberof the one or more panes to display.
 3. The system of claim 2, whereinautomatically arranging the content to fit the display comprisesautomatically determining a size of the one or more panes.
 4. The systemof claim 2, wherein the responsive layout comprises a grid system; andwherein the grid system comprises a series of rows and columnscomprising the one or more panes.
 5. The system of claim 4, wherein thegrid system comprises one or more breakpoints; and wherein the one ormore breakpoints are configured to define the size and shape of the oneor more panes.
 6. The system of claim 2, wherein the responsive layoutcomprises one or more breakpoints; and wherein the one or morebreakpoints are configured to define the size and shape of the one ormore panes.
 7. The system of claim 6, wherein the one or morebreakpoints are configured to define the size and shape of the one ormore panes based on a total area of the display.
 8. The system of claim7, wherein the size and shape of the one or more panes are based on apercentage of the total area of the display.
 9. The system of claim 7,wherein the size and shape of the one or more panes are based on a totalnumber of pixels the total area of the display.
 10. A system fordisplaying operational overview content comprising: a historian servercomprising a historian database, and one or more computers comprisingone or more processors and one or more computer readable media, the oneor more computer readable media comprising processor executableinstructions that when executed by the one or more processors implement:a graphical user interface (GUI), a responsive layout, and one or morepanes; wherein the responsive layout comprises the one or more panesdisplayed on the GUI; wherein each of the one or more panes comprisecontent; wherein the content comprises content data retrieved from thehistorian database; wherein the system is configured to detect one ormore attributes of a display; and wherein the system is configured toautomatically configure the one or more panes to fit the display basedon one or more attributes.
 11. The system of claim 10, wherein the oneor more attributes comprise one or more of a width, length, diameter,pixel count, area, operating system, manufacturer, and additionalapplications being executed by the one or more processors.
 12. Thesystem of claim 10, wherein the system is configured to automaticallyconfigure the content to fit the one or more panes based on the one ormore attributes.
 13. The system of claim 12, wherein the system isconfigured to automatically rearrange the content within each of one ormore panes based on the one or more attributes in response to a useraltering a size of the one or more panes; and wherein altering a sizecomprises a user configuring the one or more panes to occupy an area onthe display that is different from the automatic configuration.
 14. Thesystem of claim 10, wherein the system is configured to automaticallydisplay supplemental panes in the responsive layout in response to auser requesting content configured to fit into a single pane.
 15. Thesystem of claim 10, wherein the supplemental panes are configured todisplay supplemental content; wherein the supplemental content comprisesdata stored on the historian database; and wherein the system isconfigured to automatically determine the supplemental content fordisplay based on data the system identifies as needing corrective actionand/or attention.
 16. The system of claim 15, wherein the systemcomprises artificial intelligence and/or machine learning configured toautomatically identify the supplemental content.
 17. The system of claim16, wherein the supplemental content comprises an analysis of one ormore of alerts, expected component lifetime, production and/or businesstrends, predictions, and/or throughput.
 18. The system of claim 11,wherein the system is configured to automatically create a newresponsive layout based on the content of a selected one of the one ormore panes.